<template>
	<view class="select-location">
		<view class="cu-bar search bg-white" id="TabCurTab">

			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :focus="true" :value="keyword" placeholder="关键词搜索" @input="changeEvent" @confirm="handleSearch">
				</input>
			</view>
			<!-- <view class="cu-avatar round search_img" :style="item.userVo.userProtrait"></view> -->
		</view>
		<view class="search">


			<scroll-view class="search-list" scroll-y>
				<view class="list-item van-hairline--bottom" v-for="(item) in list" :key="item.id"
					@tap="handleSelect(item)">
					<view class="info">
						<view class="title ellipsis">{{ item.title }}</view>
						<view class="address ellipsis">{{ item.address }}</view>
					</view>
				</view>
				<view v-if="loading" class="loading">
						<text class="loading-text">加载中...</text>
				</view>
				<view v-if="noResult" class="no-result">
					您搜索的地点不存在或者超出了范围
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import debounce from 'lodash/debounce'
	import {
		mapSearch
	} from '@/util'
	import {
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				keyword: '',
				loading: false,
				noResult: false,
				list: [],
				longitude: '',
				latitude: '',
				changeEvent: debounce(this.handleChange, 500)
			}
		},
		onLoad({
			longitude,
			latitude
		}) {
			this.longitude = longitude
			this.latitude = latitude
		},
		methods: {
			...mapMutations(['SET_SELECTED_LOCATION', 'SET_SELECTED_SEARCH']),
			handleChange(e) {
				this.keyword = e.detail.value
				this.mapSearch()
			},
			handleSearch(e) {
				this.keyword = e.detail.value
				this.mapSearch()
			},
			handleSelect(item) {
				this.SET_SELECTED_SEARCH(item)
				this.SET_SELECTED_LOCATION(null)
				uni.navigateBack()
			},
			mapSearch() {
				if (!this.keyword) return
				this.list = []
				this.noResult = false
				this.loading = true
				mapSearch(this.keyword, {
						longitude: this.longitude,
						latitude: this.latitude,
					})
					.then(res => {
						this.list = res.data
						this.loading = false
						if (!this.list.length) {
							this.noResult = true
						}
					})
					.catch(() => {
						this.noResult = false
						this.loading = false
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		height: 100%;
		display: flex;
		// flex-direction: column;
		overflow: hidden;

		.top-search {
			box-shadow: 0px 1px 10px 1px rgba(153, 153, 153, 0.34);
		}

		.search-list {
			overflow: auto;
			position: relative;
			flex: 1;

			.list-item {
				padding: 30rpx;

				.title,
				.address {
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.title {
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.address {
					font-size: 24rpx;
					height: 34rpx;
					color: $uni-text-color-grey;
				}
			}
		}

		.loading {
			text-align: center;
			margin-top: 30rpx;
		}

		.no-result {
			width: 100%;
			text-align: center;
			font-size: 24rpx;
			color: $uni-text-color-grey;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}
</style>
